<!-- 种公牛精液品质 -->
<template>
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="企业名称" v-if="companySelect">
            <el-select clearable filterable v-model="formInline.companyId">
                <el-option v-for="item in companyNameList" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item label="选择牛号">
            <el-select clearable filterable v-model="formInline.cowId">
                <el-option v-for="item in allComNameList" :label="`${item.code}-${item.breed}-${item.genderName}`" :value="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item label="检测状态">
            <el-select clearable v-model="formInline.type" placeholder="请选择检测状态">
                <el-option label="全部" :value="0" />
                <el-option label="待检测" :value="1" />
                <el-option label="已检测" :value="2" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button icon="Search" @click="search">查询</el-button>
        </el-form-item>
    </el-form>

    <div class="mb-4" style="margin-bottom: 18px;">
        <el-button v-if="addButton" type="info" icon="Plus" @click="isAddShow = true">新增</el-button>
        <el-button v-if="uploadButton" type="primary" icon="Upload">导入</el-button>
        <el-button type="success" icon="Download">导出</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" stripe border style="width: 100%;">
        <el-table-column prop="niuhao" label="牛号" width="350" fixed="left">
            <template #default="scope">
                <div style="display: flex;">
                    <span>{{ scope.row.cowCode }}</span>
                    <!-- 性别 -->
                    <el-tag v-if="scope.row.genderName == '公牛'" style="margin-left: auto;" effect="dark" type="primary" size="small">{{ scope.row.genderName }}</el-tag>
                    <el-tag v-if="scope.row.genderName == '母牛'" style="margin-left: auto;" effect="dark" type="danger" size="small">{{ scope.row.genderName }}</el-tag>
                    <!-- 品种 -->
                    <el-tag style="margin: 0 5px;" effect="dark" type="success" size="small">{{ scope.row.breed }}</el-tag>
                    <!-- 年龄 -->
                    <el-tag effect="dark" type="info" size="small">{{ scope.row.age }}</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column v-if="companyColumn" prop="companyName" label="企业名称" width="150" show-overflow-tooltip />
        <el-table-column prop="sampleDate" label="取样日期" width="120" />
        <el-table-column prop="reportDate" label="报告日期" width="120" />
        <el-table-column prop="semenType" label="精液种类" width="120">
            <template #default="scope">
                <el-tag type="primary" v-if="scope.row.semenType == 0">鲜精</el-tag>
                <el-tag type="warning" v-if="scope.row.semenType == 1">冻精</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="semenNo" label="精液编号" width="120" />
        <el-table-column prop="collectionVolume" label="采精量(ml)" width="120" />
        <el-table-column prop="dosage" label="剂量(ml)"  width="150">
            <template #default="scope">
                <div>检测结果:{{ scope.row.dosage }}</div>
                <div>检测结论:{{ scope.row.dosageQualified ? '合格' : '不合格' }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="spermMotility" label="精子活力(%)" width="150">
            <template #default="scope">
                <div>检测结果:{{ scope.row.spermMotility }}</div>
                <div>检测结论:{{ scope.row.spermMotilityQualified ? '合格' : '不合格' }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="forwardMovingSpermCount" label="前向运动精子数" width="150">
            <template #default="scope">
                <div>检测结果:{{ scope.row.forwardMovingSpermCount }}</div>
                <div>检测结论:{{ scope.row.forwardMovingSpermCountQualified ? '合格' : '不合格' }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="spermAbnormalityRate" label="精子畸形率(%)" width="150">
            <template #default="scope">
                <div>检测结果:{{ scope.row.spermAbnormalityRate }}</div>
                <div>检测结论:{{ scope.row.spermAbnormalityRateQualified ? '合格' : '不合格' }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="totalColonyCount" label="菌落总数" width="150">
            <template #default="scope">
                <div>检测结果:{{ scope.row.totalColonyCount }}</div>
                <div>检测结论:{{ scope.row.totalColonyCountQualified ? '合格' : '不合格' }}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" :width="tdWidthItem" fixed="right">
            <template #default="scope">
                <div ref="tdWidth" style="display: inline-block; white-space: normal;">
                <el-button v-if="editButton" type="primary" icon="Tickets" size="small" @click="editItem(scope.row.id)">编辑</el-button>
                <el-button v-if="scope.row.reportUrl" type="info" icon="Download" size="small" @click="downloadReport(scope.row.reportUrl)">下载</el-button>
                <!-- <el-button type="info" icon="Warning" size="small" @click="abnormalHandler">数据异常</el-button> -->
                </div>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <!-- 分页器 -->
    <el-pagination
        v-model:currentPage="pageNo"
        v-model:page-size="limit"
        :page-sizes="[15, 30, 50, 100]"
        :small="false"
        :background="true"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @current-change="getSemenQualityPage"
        @size-change="sizeChange"
    />

    <!-- 新增弹窗 -->
    <add :isAddShow="isAddShow" @closeIsAddShow="closeIsAddShow"></add>

    <!-- 编辑弹窗 -->
    <edit :isEditShow="isEditShow" :editId="editId" @closeIsEditShow="closeIsEditShow"></edit>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reqGetCompanyNameList } from '@/api/company'
import { reqGetSemenQualityPage } from '@/api/daily'
import { reqCowSemenQualityCowSelect } from '@/api/publicCowSelect'
import { ElMessageBox } from 'element-plus'
import add from './add/index.vue'
import edit from './edit/index.vue'
// 引入用户相关小仓库
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
const companyColumn = userStore.componentConfig.companyColumn // 企业名称列-是否显示
const companySelect = userStore.componentConfig.companySelect // 企业下拉-是否显示
const addButton = userStore.componentConfig.addButton // 新增按钮-是否显示
const deleteButton = userStore.componentConfig.deleteButton // 删除按钮-是否显示
const editButton = userStore.componentConfig.editButton // 编辑按钮-是否显示
const errorButton = userStore.componentConfig.errorButton // 数据异常按钮-是否显示
const uploadButton = userStore.componentConfig.uploadButton // 导入按钮-是否显示

// 分页器当前页码
let pageNo = ref(1)
// 每一页展示多少条数据
let limit = ref(15)
// 数据总条数
let total = ref(0)

// 点击查询按钮
const search = () => {
    pageNo.value = 1
    getSemenQualityPage()
}

// 表单收集
const formInline = reactive({
    companyId: '', // 牛id
    cowId: '', // 牛id
    sortName: '', // 排序字段名称
    sortName: '', // 排序字段名称
    sortType: '', // 排序类型：ascending-正序、descending-倒序
    type: '', // 0-全部、1-待检测，2-已检测
})

// 新增弹窗，显示与隐藏
let isAddShow = ref(false)
// 关闭新增弹窗
const closeIsAddShow = (val) => {
    isAddShow.value = val
    getSemenQualityPage()
}

// 下载报告
const downloadReport = (reportUrl) => {
    let url = reportUrl
    let a = document.createElement("a")
	a.style = "display: none"
	a.target = "_blank"
	// a.download = "file"
	a.href = url
	document.body.appendChild(a)
	a.click()
	document.body.removeChild(a)
	URL.revokeObjectURL(url)
}

// 编辑弹窗，显示与隐藏
let isEditShow = ref(false)
// 关闭编辑弹窗
const closeIsEditShow = (val) => {
    isEditShow.value = val
}

// 点击编辑按钮
let editId = ref('')
const editItem = (id) => {
    isEditShow.value = true
    editId.value = id
}

// 获取表格数据
const tableData = ref([])
const getSemenQualityPage = async() => {
    let res = await reqGetSemenQualityPage(Object.assign(formInline, {
        pageNumber: pageNo.value, // 页号
        pageSize: limit.value, // 每页数量
    }))
    if(res.status == 200){
        tableData.value = res.data.records
        total.value = res.data.totalRow
    }
}

// 获取牛号下拉列表
let allComNameList = ref([])
const cowSemenQualityCowSelect = async () => {
    let res = await reqCowSemenQualityCowSelect()
    allComNameList.value = res.data
}

// 获取企业下拉列表数据
let companyNameList = ref([])
const getCompanyNameList = async () => {
    let res = await reqGetCompanyNameList()
    companyNameList.value = res.data
}

// 异常按钮
const abnormalHandler = () => {
    ElMessageBox.prompt('请输入异常原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        inputPattern: /^.+$/,
        inputErrorMessage: '请填写异常原因'
    }).then((res) => {
            console.log('异常原因为：', res.value)
    }).catch(() => {
            console.log('取消填写异常原因')
    })
}

// 分页的下拉菜单发生改变时触发
const sizeChange = () => {
    pageNo.value = 1
    getSemenQualityPage()
}

// 组件挂载完毕
onMounted(() => {
    cowSemenQualityCowSelect()
    getCompanyNameList()
    getSemenQualityPage()
    widthAuto()
})

// 设置操作栏按钮，宽度自适应
const tdWidthItem = ref(200)
const tdWidth = ref()
const widthAuto = () => {
    setTimeout(() => {
        tdWidthItem.value = tdWidth.value.offsetWidth + 30
    }, 500)
}
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>